<script>
import { ArrowLeft, ArrowRight, ChatDotRound } from '@element-plus/icons-vue'
// 导入语言包，使日历组件内容变成中文
import zhcn from 'element-plus/lib/locale/lang/zh-cn'
import { getBroadcastList, getTeacherList, getStuIdeaList, getJobList,getErWeiMaList } from "../../api/home";
// 导入消息弹出框
import { ElMessageBox, ElMessage } from 'element-plus'

export default {
    data() {
        return {
            chooseDate: new Date(),
            data: new Date(),
            local: zhcn,
            class1Select: '2210',
            class2Select: '2210',
            class3Select: '2210',
            class4Select: '离散分析',
            tableData: [],
            timeOut: false,
            list1: [],
            list2: [],
            list3: [],
            list4: {},
            currentPage: 1,
            currentData: [],
        }
    },
    components: {
        ArrowLeft,
        ArrowRight,
        ChatDotRound
    },
    mounted() {
        this.getList1();
        this.getList2();
        this.getList3();
        this.getList4();
        getJobList().then(res => {
            this.tableData = res.data;
            this.currentData = this.tableData.slice((this.currentPage - 1) * 8, this.currentPage * 8);
        });

    },
    watch: {
        chooseDate() {
            this.getList1();
        }
    },
    computed: {

    },
    methods: {
        selectDate(value) {
            this.$refs.calendar.selectDate(value);
        },
        getList1() {
            getBroadcastList(
                {
                    class: this.class1Select,
                    date: this.chooseDate.toLocaleDateString()
                }
            ).then((res) => {
                // console.log(res);
                if (res.code == '200') {
                    this.list1 = res.data;
                }
            });
        },

        getList2() {
            getTeacherList({
                class: this.class2Select,
            }).then(res => {
                // console.log(res);
                if (res.code == '200') {
                    this.list2 = res.data;
                }
            })
        },

        getList3() {
            getStuIdeaList({
                class: this.class3Select,
            }).then(res => {
                // console.log(res);
                if (res.code == '200') {
                    this.list3 = res.data;
                }
            })
        },

        getList4(){
            getErWeiMaList({
                type:this.class4Select,
            }).then(res=>{
                if (res.code == '200') {
                    this.list4 = res.data[0];
                }
            })
        },
        // 分页数据
        changeData() {
            this.currentData = this.tableData.slice((this.currentPage - 1) * 8, this.currentPage * 8);
        },
        // 点击查看详情弹出任务详情页面
        jobDetail(row) {
            // console.log(row);
            // alert(1);
            ElMessageBox.confirm(
                `<div class="detailMsg">
                    <p>授课时间:<span class="detailBox">${String(row.time)}</span></p>
                    <p>课程内容:<span class="detailBox">${row.jobContent}</span></p>
                    <p>报名人数:<span class="detailBox">${row.jobCount}</span></p>
                </div>`,
                'Confirm',
                {
                    dangerouslyUseHTMLString: true,
                    confirmButtonText: '接收',
                    cancelButtonText: '拒绝',
                }
            ).then(() => {
                ElMessage({
                    type: 'info',
                    message: '选择了任务，将会添加到行程。',
                })
            }).catch((action) => {
                ElMessage({
                    type: 'info',
                    message:
                        action === 'cancel' ? '你拒绝了该任务' : '你取消了选择',
                })
            })
        }
    }
}

</script>
<template>
    <div class="homeIndex">
        <div class="main1">
            <div class="header">直播日历
                <span class="more">更多</span>
            </div>
            <div class="input">
                <label for="">班级选择</label>
                <el-select v-model="class1Select" @change="getList1" style="width: 115px" placeholder=" ">
                    <el-option value="2210" />
                    <el-option value="2211" />
                    <el-option value="2212" />
                    <el-option value="2213" />
                    <el-option value="2214" />
                    <el-option value="2215" />
                </el-select>
            </div>
            <!-- 日历 -->
            <el-config-provider :locale="local">
                <el-calendar v-model="chooseDate" ref="calendar">
                    <template #header="{ date }">
                        <el-icon @click="selectDate('prev-month')">
                            <ArrowLeft />
                        </el-icon>
                        <span>{{ date }}</span>
                        <el-icon @click="selectDate('next-month')">
                            <ArrowRight />
                        </el-icon>
                    </template>
                </el-calendar>
            </el-config-provider>
            <div class="watch">
                <!-- 根据value来请求数据，获取当天的直播信息v-for遍历main1List -->
                <div v-for="(item, index) in list1" :key="index">
                    <span>{{ item.time[1] }}</span>
                    <span>{{ item.type }}</span>
                    <span>{{ item.teacherName }}</span>
                    <span v-if="timeOut" style="color:blue;">观看直播</span>
                    <span v-else style="color:#ccc;">查看回放</span>
                </div>
            </div>
        </div>
        <div class="main2">
            <div class="header">配班教师</div>
            <div class="input">
                <label for="">班级选择</label>
                <el-select v-model="class2Select" @change="getList2" style="width: 115px" placeholder=" ">
                    <el-option value="2210" />
                    <el-option value="2211" />
                    <el-option value="2212" />
                    <el-option value="2213" />
                    <el-option value="2214" />
                    <el-option value="2215" />
                </el-select>
            </div>
            <!-- 教师信息 -->
            <div class="teachers">
                <!-- 这里也是 用 v-for 来遍历数据 -->
                <div class="teacherInfo" v-for="(item, index) in list2" :key="index">
                    <img :src="item.img" alt="">
                    <p>
                        <span>{{ item.teacherName }}
                            <el-icon>
                                <ChatDotRound />
                            </el-icon>
                        </span>
                    </p>
                    <p>
                        <span>{{ item.type }}</span>
                        <span>联系电话:{{ item.teacherTel }}</span>
                    </p>
                </div>

            </div>

        </div>
        <div class="main3">
            <div class="header">学员评价
                <span class="more">更多</span>
            </div>
            <div class="input">
                <label for="">班级选择</label>
                <el-select v-model="class3Select" @change="getList3" style="width: 115px" placeholder=" ">
                    <el-option value="2210" />
                    <el-option value="2211" />
                    <el-option value="2212" />
                    <el-option value="2213" />
                    <el-option value="2214" />
                    <el-option value="2215" />
                </el-select>
            </div>

            <!-- 学员评价 -->
            <div class="students">
                <div class="studentInfo" v-for="(item, index) in list3" :key="index">
                    <img :src='item.img' alt="">
                    <p>
                        <span>{{ item.studentName }}
                        </span>
                    </p>
                    <p>
                        <span>{{ String(item.time) }}</span>
                        <span style="color:orange">{{ item.level }}</span>
                    </p>
                    <p>
                        <span>{{ item.detail }}</span>
                    </p>
                </div>

            </div>
        </div>
        <div class="main4">
            <div class="header">任务安排</div>
            <el-table :data="currentData" style="width: 100%">
                <el-table-column prop="time" label="发布时间" width="180" />
                <el-table-column prop="jobName" label="任务名称" width="180" />
                <el-table-column label="操作">
                    <template #default="scope">
                        <span class="jobDetail" @click="jobDetail(scope.row)">查看详情</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination v-model:currentPage="currentPage" :pageSize="8" @currentChange="changeData"
                layout="prev, pager, next, jumper" :total="tableData.length" />
        </div>
        <div class="main5">
            <div class="header">邀请码</div>
            <div class="input">
                <label for="">课程类型</label>
                <el-select v-model="class4Select" @change="getList4" style="width: 115px" placeholder=" ">
                    <el-option value="离散分析" />
                    <el-option value="线性代数" />
                    <el-option value="微积分" />
                    <el-option value="高等数学" />
                    <el-option value="前端HTML5" />
                    <el-option value="JAVA" />
                </el-select>
            </div>
            <div class="erweima">
                <img :src="list4.img" alt="邀请码">
                <p>
                    邀请码：{{list4.code}}
                </p>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
.homeIndex {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    justify-content: space-between;
    color: black;
    overflow: hidden;

    .main1 {
        padding: 10px;
        box-sizing: border-box;
        width: 30%;
        height: 400px;
        display: flex;
        flex-direction: column;
        background-color: aliceblue;

        .more {
            float: right;
            cursor: pointer;
        }


        .input {
            display: flex;
            width: 240px;
            align-items: center;
            margin-bottom: 10px;

            .el-input {
                margin-left: 10px;
                width: 100px;
            }
        }

        // 日历
        .el-calendar {
            width: 100%;
            height: 250px;

            .el-calendar__header {
                background-color: blue;
            }

            .el-calendar__body .el-calendar-table {
                height: 200px;

                .el-calendar-day {
                    width: 30px;
                    height: 30px;
                }
            }

            .is-selected {
                background-color: rgb(98, 255, 0);
                color: rgb(238, 85, 8);
            }
        }

        .watch {
            width: 100%;
            height: 100px;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            line-height: 30px;

            div {
                display: flex;
                justify-content: space-around;
            }
        }
    }

    .main2 {
        padding: 10px;
        box-sizing: border-box;
        width: 30%;
        height: 400px;
        display: flex;
        flex-direction: column;
        background-color: antiquewhite;

        .input {
            display: flex;
            width: 240px;
            align-items: center;

            .el-input {
                margin-left: 10px;
                width: 100px;
            }
        }

        .teachers {
            overflow-y: auto;

            .teacherInfo {
                width: 300px;
                height: 80px;

                img {
                    width: 50px;
                    height: 50%;
                    float: left;
                }
            }
        }
    }

    .main3 {
        padding: 10px;
        box-sizing: border-box;
        width: 30%;
        height: 400px;
        display: flex;
        flex-direction: column;
        background-color: aqua;

        .more {
            float: right;
            cursor: pointer;
        }

        .input {
            display: flex;
            width: 240px;
            align-items: center;

            .el-input {
                margin-left: 10px;
                width: 100px;
            }
        }

        .students {
            height: 400px;
            overflow-y: auto;

            .studentInfo {
                width: 300px;
                height: 120px;
                overflow: hidden;
                margin: 10px 0;

                img {
                    width: 70px;
                    height: 70px;
                    float: left;
                }
            }
        }
    }

    .main4 {
        padding: 10px;
        box-sizing: border-box;
        width: 60%;
        height: 300px;
        display: flex;
        flex-direction: column;
        background-color: chartreuse;

        .el-table {
            --el-table-header-bg-color: #4b19d1;
            margin-bottom: 10px;
        }

    }

    .main5 {
        padding: 10px;
        box-sizing: border-box;
        width: 30%;
        height: 300px;
        display: flex;
        flex-direction: column;
        background-color: blueviolet;
        .input{
            .el-select{
                margin-left:10px;
            }
        }
        .erweima {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            img {
                width: 150px;
                height: 150px;
            }
        }
    }

    .header {
        width: 100%;
        height: 40px;
        position: relative;
        text-indent: 20px;

    }

    .header::before {
        display: block;
        content: '';
        width: 5px;
        height: 5px;
        border-radius: 100%;
        background-color: black;
        position: absolute;
        left: 10px;
        top: 10px;
    }
}

.jobDetail {
    color: blue;
    cursor: pointer;
}

.detailMsg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 25px;
    height: 100px;

    .detailBox {
        display: inline-block;
        border: 1px solid #ccc;
        width: 200px;
        height: 25px;
        line-height: 25px;
    }
}
</style>